import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'
import i18n from './lang'

import '@/icons' // icon
import '@/permission' // 路由导航守卫

// import PageTools from '@/components/PageTools' // 导入组件

// Vue.component('PageTools', PageTools) // 注册全局组件

// 1. 定义一个Vue插件，它就是一个对象，特殊之处就是它有一个install方法
// const obj = {
//   install(Vue) { //  Vue 是一个形参，在函数被调用的过程中，自动传入Vue构造器
//     console.log(Vue)
//     Vue.component('PageTools', PageTools) // 注册全局组件
//   }
// }

// // 2. 注册插件
// Vue.use(obj)

// 导入定义的Vue插件
import components from '@/components'
Vue.use(components) // 注册插件，里面注册有全局组件

// set ElementUI lang to EN
Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

// console.log('当前所有的环境变量', process.env)

// Vue.directive('指令名字', 配置对象)
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时inserted会自动执行
  inserted: function(el, binding) {
    // el 当前使用指令的元素，binding指令的一些属性，binding.value指令接收的值
    console.log('focus, binding', el, binding)
    el.style.backgroundColor = 'pink'
    el.focus() // 聚焦元素
  }
})

// 全局自定义指令 v-allow, 控制按钮级别的权限验证
Vue.directive('allow', {
  inserted: function(el, binding) {
    console.log('判断这个元素是否会显示', binding.value)
    // 从vuex中取出ponits, 如果ponits里有binding.value则显示元素
    const points = store.state.user.userInfo.roles.points
    if (points.includes(binding.value)) {
      // 显示这个元素
    } else { // 隐藏这个元素
      // el.style.display = 'none' // 隐藏节点
      el.parentNode.removeChild(el) // 删除节点
    }
  }
})

Vue.config.productionTip = false 

new Vue({
  el: '#app',
  router, // this.$router
  store, // this.$store
  i18n, // this.$i18n
  render: h => h(App)
})
